<template>
	<div class="lz-rent_flats h-100">
		<el-tabs class="d-flex flex-column h-100" v-model="activeName" @tab-click="handleClick">
			<el-tab-pane class="h-100 tabpane" label="智能门锁" name="first">
				<div class="search w-25">
					<el-input placeholder="请输入内容" size="small">
						<el-button slot="append" type="primary" icon="el-icon-search"></el-button>
					</el-input>
				</div>
				<div class="table_list">
					<el-table :data="tableData" stripe style="width: 100%" size="small">
						<el-table-column prop="date" label="日期" width="180"></el-table-column>
						<el-table-column prop="name" label="姓名" width="180"></el-table-column>
						<el-table-column prop="address" label="地址"></el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button size="mini" @click="handleToBind(scope.$index, scope.row)">绑定</el-button>
								<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">解绑
								</el-button>
								<el-button size="mini" type="primary" @click="handleRecord(scope.$index, scope.row)">
									开锁记录</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<el-pagination class="pagination pt-2 pb-2 justify-content-end" background layout="prev, pager, next"
					:total="1000"></el-pagination>
			</el-tab-pane>
			<el-tab-pane label="智能电表" name="second">
				智能电表
			</el-tab-pane>
			<el-tab-pane label="智能水表" name="third">
				智能水表
			</el-tab-pane>
		</el-tabs>

		<el-dialog title="开锁记录" :visible.sync="dialogTableVisible" top="10vh" custom-class="record_dialog">
			<div class="time_range">
				<el-date-picker size="small" v-model="record_date" type="datetimerange" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期">
				</el-date-picker>
			</div>
			<el-table :data="tableData" class="record_list" max-height="400px">
				<el-table-column property="date" label="日期" width="150"></el-table-column>
				<el-table-column property="name" label="姓名" width="200"></el-table-column>
				<el-table-column property="address" label="地址"></el-table-column>
			</el-table>

			<el-pagination class="pagination pt-2 pb-2 justify-content-end" background layout="prev, pager, next"
				:total="1000"></el-pagination>
		</el-dialog>

	</div>
</template>

<script>
	let tableData = [{
		date: '2016-05-02',
		name: '王小虎',
		address: '上海市普陀区金沙江路 1518 弄'
	}, {
		date: '2016-05-04',
		name: '王小虎',
		address: '上海市普陀区金沙江路 1517 弄'
	}, {
		date: '2016-05-01',
		name: '王小虎',
		address: '上海市普陀区金沙江路 1519 弄'
	}, {
		date: '2016-05-03',
		name: '王小虎',
		address: '上海市普陀区金沙江路 1516 弄'
	}];
	export default {
		name: 'RentFlatsManage',
		data() {
			return {
				activeName: 'first',
				tableData: [...tableData, ...tableData, ...tableData, ...tableData],
                dialogTableVisible: false,
                record_date: ''
			}
		},
		methods: {
			handleClick() {},
			handleToBind() {
				this.$confirm('此操作将绑定xxx, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			handleRecord() {
				this.dialogTableVisible = true;
			}
		}
	}

</script>
<style lang="scss" scoped>
	.lz-rent_flats {
		.tabpane {
			display: flex;
			flex-direction: column;
		}
	}

	.search {
		height: 40px;
	}

	.table_list {
		overflow: auto;
	}

    .record_dialog{
        overflow: hidden;
        .record_list {
            overflow: auto;
        }
    }
	

</style>
